body {
  --l: calc(100vw/var(--n-cols));
  --hl: calc(.5*var(--l));
  --ri: calc(.5*1.73205*var(--l));
  box-sizing: border-box;
  display: grid;
  place-content: center;
  grid-template: repeat(var(--n-rows), var(--l))/repeat(var(--n-cols), var(--ri));
  grid-gap: var(--hl) 0;
  overflow: hidden;
  margin: 0;
  padding: var(--hl) 0;
  height: 100vh;
  background: #262626;
  filter: drop-shadow(2px 2px 5px);
}
@media (orientation: landscape) {
  /* line 5, ../sass/tmp.scss */
  body {
    --l: calc(100vh/(var(--n-rows) + 3));
  }
}

/* line 24, ../sass/tmp.scss */
.hex-cell {
  overflow: hidden;
  grid-column-end: span 2;
  margin: calc(-1*var(--hl)) 0;
  transform: scale(0.95);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* line 32, ../sass/tmp.scss */
img {
  --hl: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + .2*var(--hl)));
  filter: brightness(calc(.6*(1 + var(--hl))));
  transition: .7s;
}
/* line 40, ../sass/tmp.scss */
img:hover {
  --hl: 1;
}